<template>
	<view style="padding: 20px;">
		<!-- 资源链接 -->
		<view class="row-lineConter" style="font-size: 15px; margin-top: 15px;">
			<view class="titleStyle" style="margin-right: 15px; font-size: 15px;">
				添加分类:
			</view>
			<view class="">
				<view class="textView" style=" height: 20px; width: 100px;">
					<textarea class="custom-textarea" style="color: rgb(105, 105, 105); font-size:14px;"
						placeholder-style="font-size: 14px;" v-model="typeValue" placeholder="输入分类名称" />
				</view>
			</view>

			<view @click="addClick()" class="zsConter mainBgColor"
				style=" height: 30px; margin-left: 10px; color: white; font-size: 16px; padding: 0px 8px; border-radius: 4px;">
				添加
			</view>
		</view>


		<view class=" row-lineConter tipsTextColor" style="margin-top: 5px;">
			<uni-icons type="info" size="18" color="rgb(224, 168, 99)"></uni-icons>
			<view style="margin-left: 10rpx; font-size: 15px;">
				排序值越大显示顺序越靠前，修改后点击，保存排序按钮即可生效。
			</view>
		</view>
		<view class="" style="margin-top: 10px;">
			<view v-for="(item,index) in typeList" :key="index">
				<view class="row-lineConter">
					<view class="zsConter mainColor" style="font-size: 15px; background-color: #F8F8F8; width: 100px; height: 50px;">
						{{item.typeStr}}
					</view>

					<view class="row-lineConter">
						<view class="titleStyle" style="margin: 0px 5px; font-size: 13px;">
							排序值:
						</view>
						<view class="textView" style=" height: 20px; width: 60px;">
							<textarea class="custom-textarea" style="color: rgb(105, 105, 105); font-size:13px;"
								placeholder-style="font-size: 13px;" v-model="item.sortValue" placeholder="输入排序值" />
						</view>

						<view @click="updataData(index)" class="zsConter mainBgColor"
							style="border-radius: 4px;margin-left: 10px;  color: white; height: 30px; font-size: 16px; padding: 0px 8px;">
							保存排序
						</view>
					</view>
					<view @click="deleteClick(index)" class="zsConter"
						style="border-radius: 4px;margin-left: 10px; background-color: red; color: white; height: 30px; font-size: 16px; padding: 0px 8px;">
						删除
					</view>
				</view>

				<view class="" style="width: 100px;">
					<view class="lineStyle">

					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [],
				typeValue: ''
			}
		},
		onLoad() {
			this.getTypeList()
		},
		methods: {
			getTypeList() {
				this.$uniCloudApi.get_type_list().then(res => {
					// var typeModel = res[0]
					// var list = [];
					// res.forEach(item => {
					// 	list.push(item.typeStr);
					// });
					this.typeList = res;
				});
			},
			addClick() {

				if (this.typeValue == '') {
					this.$showToast('请输入分类名称');
					return
				}
				uni.showLoading({
					title: '添加中...'
				})
				this.$uniCloudApi.add_type(this.typeValue).then(res => {
					uni.hideLoading();
					if (res == true) {
						this.$showToast('添加成功');
						this.getTypeList();
						this.typeValue = '';
					} else {
						this.$showToast(res);
					}
				}).catch(res => {
					uni.hideLoading();
					this.$showToast(res);
				});
			},
			updataData(index) {
				var model = this.typeList[index]
				console.log('点击排序==', model);
				this.$uniCloudApi.update_type_data(model).then(res => {
					if (res == true) {
						this.getTypeList()
					} else {
						this.$showToast(res)
					}
				}).catch(res => {
					this.$showToast(res)
				})
			},
			deleteClick(index) {
				var model = this.typeList[index]
				var id = model._id;
				uni.showLoading({
					title: '删除中...'
				})
				this.$uniCloudApi.delete_type_id(id).then(res => {
					uni.hideLoading();
					if (res == true) {
						this.$showToast('删除成功');
						this.typeList.splice(index,1);
						this.$forceUpdate();
					} else {
						this.$showToast(res);
					}
				}).catch(res => {
					uni.hideLoading();
					this.$showToast(res);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tipsView {
		color: rgb(224, 168, 99);
		font-size: 30rpx;
		border-radius: 8rpx;
		padding: 16rpx;
		background-color: rgba(224, 168, 99, 0.2);
		border: 1px solid rgb(224, 168, 99);
	}

	.titleStyle {
		font-size: 24rpx;
		font-weight: bold;
		color: #86909C;
	}

	.textView {
		padding: 8px;
		border-radius: 6px;
		border: 1px solid rgb(239, 239, 239);

	}

	.custom-textarea {
		max-width: 100%;
		max-height: 100%;
		/* 确保最大宽度不超过100% */
	}

	.gColor {
		background-color: rgb(244, 245, 247);
	}
</style>